<template>
  <div class="background">
    <div class="logo">
      <img class="logo-img" src="@/assets/Logo1.png">
      <div class="logo-text">
        <el-button class="home" @click="goHome">返回首页</el-button>
        <text class="between">|</text>
        <el-button class="login" @click="goLogin">登录</el-button>
      </div>
      <div class="title-underline">———————————————————————————————————</div>
    </div>
    <el-container class="register-container">
      <el-header class="register-header">
        <div class="register-title">用户注册</div>
        <div class="item-box" v-if="step === 1">
          <div class="item1step1">①基本信息</div>
          <div class="item2step1">②联系信息</div>
          <div class="item3step1">③注册完成</div>
        </div>
        <div class="item-box" v-if="step === 2">
          <div class="item1step2">①基本信息</div>
          <div class="item2step2">②联系信息</div>
          <div class="item3step2">③注册完成</div>
        </div>
        <div class="item-box" v-if="step === 3">
          <div class="item1step3">①基本信息</div>
          <div class="item2step3">②联系信息</div>
          <div class="item3step3">③注册完成</div>
        </div>
        <div class="underline">——————————————————————————————————————————————————————</div>
      </el-header>
      <el-main class="register-box" type="card">
        <template v-if="step === 1">
          <el-form class="register-form" ref="form" :model="form" label-width="80px">
            <el-form-item label="中文姓名" class="name-item">
              <el-input v-model="form.name" :maxlength="10" :show-word-limit="true"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" class="idCard-item">
              <el-select v-model="form.idCardType" placeholder="请选择证件类型">
                <el-option
                    v-for="item in idCardTypes"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" class="idCard-item">
              <el-input v-model="form.idCard" :placeholder="'请输入' + idCardTypeName + '号码'" :maxlength="18" :show-word-limit="true"></el-input>
            </el-form-item>
            <text class="chose-text">称谓</text>
            <el-radio-group class="chose-item" v-model="form.sex">
              <el-radio label="男">先生</el-radio>
              <el-radio label="女">女士</el-radio>
            </el-radio-group>
          </el-form>
          <div class="btn-box">
            <el-button class="btn-next" type="primary" @click="next">下一步</el-button>
          </div>
        </template>
        <template v-if="step === 2">
          <el-form class="register-form" ref="form" :model="form" label-width="80px">
            <el-form-item label="手机" class="phoneNum">
              <el-input v-model="form.phoneNum" :maxlength="11" :show-word-limit="true"></el-input>
            </el-form-item>
            <el-form-item label="验证码" class="checkNum">
              <el-input v-model="form.verificationCode" :maxlength="6" :show-word-limit="true"></el-input>
              <el-button type="primary" @click="sendVerificationCode">获取验证码</el-button>
            </el-form-item>
            <el-form-item label="设置密码" class="password">
              <el-input v-model="form.password" type="password" :minlength="6" :maxlength="20" :show-word-limit="true"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" class="passwordCheck">
              <el-input v-model="form.passwordCheck" type="password" :minlength="6" :maxlength="20" :show-word-limit="true"></el-input>
            </el-form-item>
          </el-form>
          <div class="btn-box">
            <el-button class="btn-back" type="primary" @click="back">上一步</el-button>
            <el-button class="btn-confirm" type="primary" @click="finish">提交</el-button>
          </div>
        </template>
        <template v-if="step === 3">
          <el-text class="registerSuccess">
            <el-icon class="icon"><CircleCheckFilled/></el-icon>
            <h1 class="h1">恭喜您注册成功！</h1>
            <p class="p1">现在，您可以登录厦门航空系统享受我们的服务了。</p>
            <p class="p2">您可以点击</p>
            <el-button class="btn-Login" type="primary" @click="goLogin">此处登录</el-button>
          </el-text>
          <div class="btn-box">
            <el-button class="btn-back" type="primary" @click="goHome">返回首页</el-button>
            <el-button class="btn-confirm" type="primary" @click="goLogin">登录</el-button>
          </div>
        </template>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { CircleCheckFilled } from '@element-plus/icons-vue';
import axios from "axios";

export default {
  name: "UserRegister",
  components: {
    CircleCheckFilled
  },
  data() {
    return {
      step: 1,
      idCardTypes: [],
      idCardTypeName: "证件", // 默认证件类型名称
      form: {
        name: "",
        idCardType: "",
        idCard: "",
        sex: "",
        phoneNum: "",
        verificationCode: "",
        password: "",
        passwordCheck: ""
      }
    }
  },
  mounted() {
    this.fetchIdCardTypes();
  },
  methods: {
    goHome() {
      this.$router.push("/MainView");
    },
    goLogin() {
      this.$router.push("/Login");
    },
    next() {
      this.step = 2;
    },
    back() {
      this.step = 1;
    },
    finish() {
      if(this.form.name===""||this.form.idCard===""||this.form.idCardType===""||this.form.sex===""||this.form.phoneNum===""||this.form.verificationCode===""||this.form.password===""||this.form.passwordCheck===""){
        this.$message.error("请填写完整信息");
        return;
      }
      if (this.form.password !== this.form.passwordCheck) {
        this.$message.error("两次密码输入不一致，请重新输入");
        return;
      }
      if (this.form.phoneNum.length !== 11) {
        this.$message.error("手机号码格式不正确，请重新输入");
        return;
      }
      if (this.form.verificationCode.length !== 6) {
        this.$message.error("验证码格式不正确，请重新输入");
        return;
      }

      this.registerUser();
    },
    registerUser() {
      const registerDTO = {
        username: this.form.name,
        sex: this.form.sex,
        idCard: this.form.idCard,
        idCardType: this.form.idCardType,
        phone: this.form.phoneNum,
        password: this.form.password,
        verificationCode: this.form.verificationCode
      };
      axios.post('/register/traveller', registerDTO)
          .then(response => {
            if (response.data === "注册成功") {
              this.$message.success("注册成功！");
              this.step = 3; // 跳转到注册成功页面
            } else {
              this.$message.error(response.data); // 显示错误信息
            }
          })
          .catch(error => {
            console.error('注册失败', error);
            this.$message.error('注册失败，请稍后再试');
          });
    },
    sendVerificationCode() {
      // 1. 获取手机号
      const phoneNumber = this.form.phoneNum;
      // 2. 验证手机号格式
      if (phoneNumber.length !== 11) {
        this.$message.error("手机号码格式不正确，请重新输入");
        return;
      }
      // 3. 发送验证码请求
      axios.post('/sendVerificationCode', {phoneNumber})
          .then(response => {
            if (response.data === '验证码已发送') {
              this.$message.success('验证码已发送，请注意查收');
            } else {
              this.$message.error('验证码发送失败，请稍后再试');
            }
          })
          .catch(() => {
            this.$message.error('验证码发送失败，请稍后再试');
          });
    },
    fetchIdCardTypes() {
      axios.get('/idCardType')
          .then(response => {
            this.idCardTypes = response.data;
          })
          .catch(error => {
            console.error('获取身份证类型失败', error);
            this.$message.error('获取身份证类型失败，请稍后再试');
          });
    }
  },
  watch: {
    idCardType(newIdCardType) {
      const selectedType = this.idCardTypes.find(item => item.id === newIdCardType);
      if (selectedType) {
        this.idCardTypeName = selectedType.name;
      } else {
        this.idCardTypeName = "身份证";
      }
    }
  }
}
</script>


<style scoped>
.background{
  background-color: #f5f4f4;
  height: 100vh;
}
.logo{
  position: relative;
  background-color: #ffffff;
  top: 0;
  left: 0;
  width: 100%;
  height: 20px;
}
.logo-img{
  width: 120px;
  height: 85px;
  position: relative;
  top: -65px;
  left: -500px;
}
.title-underline{
  font-size: 48px;
  color: #0b628d;
  width: 100%;
  position: relative;
  left: -10px;
  top: -135px;
}
.home{
  position: relative;
  top: -129px;
  right:-500px;
  color: #000000;
  font-size: 14px;
  background-color: transparent;
  border: none;
}
.between{
  position: relative;
  top: -130px;
  right:-500px;
  color: #000000;
  font-size: 14px;
  background-color: transparent;
  border: none;
}

.login{
  position: relative;
  top: -129px;
  right:-500px;
  color: #000000;
  font-size: 14px;
  background-color: transparent;
  border: none;
}
.register-container{
  height: 550px;
  width: 1100px;
  position: relative;
  left: 270px;
  top: 35px;
  background-color: #ffffff;
}
.register-header{
  text-align: center;
  position: relative;
  top: 25px;
  left: 0;
  width: 1100px;
  background-color: #ffffff;
}
.register-title{
  left: -480px;
  position: relative;
  color: #025986;
  font-size: 18px;
}
.item1step1{
  position: relative;
  top: -25px;
  left:650px;
  width: 100px;
  color: #025986;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item2step1{
  position: relative;
  top: -50px;
  left:780px;
  width: 100px;
  color: #b8b3b3;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item3step1{
  position: relative;
  width: 100px;
  top: -75px;
  left:910px;
  color: #b8b3b3;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item1step2{
  position: relative;
  top: -25px;
  left:650px;
  width: 100px;
  color: #025986;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item2step2{
  position: relative;
  top: -50px;
  left:780px;
  width: 100px;
  color: #025986;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item3step2{
  position: relative;
  width: 100px;
  top: -75px;
  left:910px;
  color: #b8b3b3;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item1step3{
  position: relative;
  top: -25px;
  left:650px;
  width: 100px;
  color: #025986;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item2step3{
  position: relative;
  top: -50px;
  left:780px;
  width: 100px;
  color: #025986;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.item3step3{
  position: relative;
  width: 100px;
  top: -75px;
  left:910px;
  color: #025986;
  font-size: 18px;
  background-color: transparent;
  border: none;
  font-weight: bold;
}
.underline{
  position: relative;
  top: -65px;
  left: -10px;
  width: 100%;
  font-size: 20px;
  color: #025986;
}
.register-box{
  background-color: #ffffff;
  padding: 20px;
  margin-top: 100px;
  height: 600px;
  width: 800px;
  top: -50px;
  position: relative;
  left: 0;
}
.register-form{
  margin-top: 20px;
  width: 80vh;
  position: relative;
  left: 100px;
}
.name-item{
  margin-top: 20px;
  position: relative;
  width: 400px;
  left: 20px;
  top:-20px;
}
.idCard-item{
  margin-top: 20px;
  position: relative;
  width: 400px;
  left: 20px;
  top:-20px;
}
.chose-text{
  position: relative;
  top: -37px;
  left: -200px;
  font-size: 14px;
}
.chose-item{
  margin-top: 20px;
  position: relative;
  left: -180px;
  top:-35px;
}
.btn-next{
  margin-top: 20px;
  width: 120px;
  height: 40px;
  position: relative;
  left: -120px;
  top: 80px;
  background-color: #ee9328;
  border: none;
}
</style>